<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div id="app">
            <h2>日常工作表</h2>
            <input type="text" v-model="plus" @keyup.enter="addHero">
            <button @click="addHero">添加</button>
            <ul>
                <li v-for="(item,index) in word">
                    <span>序号{{item.id}}:{{item.behavior}}</span>
                    <span @click="delItem(index)">×</span>
                </li>
            </ul>
        </div>
        <script src="js/vue.js"></script>
        <script>
            new Vue({
                el: "#app",
                data: {
                    plus: "",
                    word: [
                        {"id": 1, "behavior": "吃饭"},
                        {"id": 2, "behavior": "睡觉"},
                        {"id": 3, "behavior": "打豆豆"},
                    ],
                    num: 4
                },
                methods: {
                    addHero() {
                        if (this.plus === "") {
                            alert("输入的数据不能为空");
                            return;
                        }
                        this.word.push({"id": this.num, "behavior": this.plus});
                        this.newHero = "";
                        this.num++;
                    },
                    delItem(index) {
                        confirm("确认要删除该记录吗?") && this.word.splice(index, 1)
                    }
                }
            })
        </script>
    </body>
</html>